<template>
<div class="band">
  <Header :categoryId="categoryId" />
  <Swiper :banner="msg.banner" />
  <van-empty image="https://img.gmw.cn/pic/loading.gif" image-size="24px" description="努力加载中" v-if="msg.itemState" />
  <div
    class="itemFloor" v-for="item in msg.categoryItemList"
    :key="item.category.id"
    v-else>
    <header class="title flex">
      <div class="name">{{ item.category.name }}</div>
      <div class="desc">{{ item.category.frontDesc }}</div>
    </header>
    <div class="goodsGrid flex">
      <div class="good" v-for="i in item.itemList" :key="i.id">
        <div class="hd">
          <lazy-component>
            <img v-lazy="i.listPicUrl" />
          </lazy-component>
        </div>
        <div class="name">{{ i.name }}</div>
        <div class="newItemDesc">{{ i.simpleDesc }}</div>
        <div class="price">¥{{ i.retailPrice }}</div>
      </div>
    </div>
  </div>
</div>
</template>

<script setup lang="ts">
import Header from "../Header/index.vue";
import Swiper from "../Swiper/Index.vue";
// 引入仓库数据
import { indexCategory } from "../../../stores/indexCategory/indexCategory";
import { onMounted, ref, watch } from "vue";
// 引入路由
import { useRoute } from "vue-router";
import type { categoryItemList } from "../../../api/home/mudul";
const route = useRoute();
// 获取query参数
let categoryId = route.query.categoryId;

// 使用仓库数据
const msg = indexCategory();

// 监听路由参数
watch(
  () => route.query.categoryId,
  (count, prevCount) => {
    categoryId = route.query.categoryId;
    msg.getCategory(route.query.categoryId!.toString());
  },
  {
    deep: true,
  }
);

// 监听仓库状态,触发表示请求已经获取到数据了
watch(
  () => msg.itemState,
  (count, prevCount) => {
  },
  {
    deep: true,
  }
);

// 加载时调用仓库方法请求数据
onMounted(() => {
  msg.getCategory(route.query.categoryId!.toString());
});
</script>

<style scoped lang="less">
.band {
  background: #eee;
  margin-bottom: 53px;
}

.flex {
  display: flex;
}

img[lazy="loading"] {
  width: 30px;
  height: 30px;
}

.itemFloor {
  width: 100%;
  margin-top: 10px;
  background: #fff;

  .title {
    width: 100%;
    height: 60px;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .name {
      font-size: 16px;
    }

    .desc {
      font-size: 12px;
      color: #999;
      max-width: 80%;
      text-align: center;
    }
  }

  .goodsGrid {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 9px;
    width: 100%;
    box-sizing: border-box;

    .good {
      width: 173px;
      height: 250px;

      .hd {
        img {
          width: 100%;
          height: auto;
          border-radius: 6px;
        }
      }

      .name {
        font-size: 14px;
      }

      .newItemDesc {
        display: none;
      }

      .price {
        color: red;
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
}
</style>